<template id='index'>
    <div class="index">
        <div class="content">
            <div class="stages">
                <div class="stagesBox cCenter">
                    <div class="stageItem cCenter" v-for="(item, index) in stageList" :key="index">
                        <img :src="item.img" v-show="currentStage == item.id" @dragstart.prevent />
                    </div>
                    <img class="startBtn" :class="{ pressCenterIn: isPress }" :src="unClick" @dragstart.prevent
                        v-show="!isMatch" @click="initAnimation" />
                    <img class="startBtn" :class="{ pressCenterOut: isPress }" :src="onClick" @dragstart.prevent
                        v-show="isMatch" />
                </div>
            </div>
            <div class="lights">
                <div class="lightBox">
                    <div class="light1 lightAnimation1" :class="{ lightMatch1: isMatch }"></div>
                    <div class="light2 lightAnimation2" :class="{ lightMatch2: isMatch }"></div>
                    <div class="light3 lightAnimation3" :class="{ lightMatch2: isMatch }"></div>
                    <div class="light4 lightAnimation4" :class="{ lightMatch1: isMatch }"></div>
                </div>
            </div>
            <div class="infomations">
                <div class="infomationsBox cCenter">
                    <img :src="title" @dragstart.prevent v-if="appConfig.show_match_title == 1" />
                    <template v-if="appConfig.show_match_description == 1">
                        <p>点击“开始匹配”</p>
                        <p>系统将智能匹配一位朋友和你视频连线</p>
                    </template>
                </div>

            </div>
            <div class="boxes">
                <div class="boxesBox cCenter">
                    <img class="original boxOriginal" :class="{ boxMatch: isMatch }" :src="boxOriginal"
                        @dragstart.prevent v-if="!hadMatch" />
                    <div class="resultBox" v-else>
                        <img class="open" :class="{ boxOpen: hadMatch }" :src="boxOpen" @dragstart.prevent
                            @animationend="isOpen = true" />
                        <img class="lid " v-if="hasLid" :class="{ lidOpen: hadMatch }" :src="boxLid" @dragstart.prevent
                            @animationend="hasLid = false" />
                    </div>
                    <div class="ribbons" v-if="hadMatch">
                        <img class="ribbon1" :class="{ ribbon1Animation: hadMatch }" :src="ribbon1"
                            @dragstart.prevent />
                        <img class="ribbon2" :class="{ ribbon2Animation: hadMatch }" :src="ribbon2"
                            @dragstart.prevent />
                        <img class="ribbon3 " :class="{ ribbon3Animation: hadMatch }" :src="ribbon3"
                            @dragstart.prevent />
                        <img class="ribbon4" :class="{ ribbon4Animation: hadMatch }" :src="ribbon4"
                            @dragstart.prevent />
                        <img class="ribbon5" :class="{ ribbon5Animation: hadMatch }" :src="ribbon5"
                            @dragstart.prevent />
                        <img class="ribbon6" :class="{ ribbon6Animation: hadMatch }" :src="ribbon6"
                            @dragstart.prevent />
                    </div>
                    <div class="resultLight" v-if="hadMatch">
                        <img class="resLight resLightAnimation" :class="{ resLightAnimation2: isOpen }" :src="resLight"
                            @dragstart.prevent />
                    </div>
                    <div class="starts" v-if="isOpen">
                        <img class="start1 big startAnimation" :src="start4" @dragstart.prevent />
                        <img class="start2 middle startAnimation" :src="start3" @dragstart.prevent />
                        <img class="start3 middle startAnimation" :src="start3" @dragstart.prevent />
                        <img class="start4 middle startAnimation" :src="start2" @dragstart.prevent />
                        <img class="start5 big startAnimation" :src="start4" @dragstart.prevent />
                        <img class="start6 big startAnimation" :src="start4" @dragstart.prevent />
                        <img class="start7 small startAnimation" :src="start2" @dragstart.prevent />
                        <img class="start8 small startAnimation" :src="start2" @dragstart.prevent />
                        <img class="start9 biggest startAnimation" :src="start1" @dragstart.prevent />
                        <img class="start10 middle startAnimation" :src="start3" @dragstart.prevent />
                        <img class="start11 big startAnimation" :src="start4" @dragstart.prevent />
                        <img class="start12 small startAnimation" :src="start2" @dragstart.prevent />
                    </div>
                    <div class="friend" v-if="isOpen">
                        <div class="bubble dCenter bubbleAnimation" :class="{ bubbleAnimation2: isEnd }"
                            @animationend="endMatch">
                            <div class="success" v-if="matchImg">
                                <img :src="matchImg" />
                            </div>
                            <div class="fail" v-else>
                                <p>啊哦,</p>
                                <p>匹配不成功</p>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <Guess :isShow="isShow" @close="closeGuess" @finish="beginToMatch" />
    </div>
</template>

<script>
import Guess from '../../components/Guess.vue';
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）

export default {
    name: '',
    components: {
        Guess
    },
    // 定义属性
    data() {
        return {
            appConfig: {
                show_match_dialog: 1, //是否显示匹配弹框：1=显示 0=不显示
                show_match_title: 1, //是否显示匹配标题：1=显示 0=不显示
                show_match_description: 1, //是否显示匹配描述：1=显示 0=不显示
                platform: 2,//1=苹果 2=安卓
            },
            isShow: false,//是否显示弹窗
            stageList: [ //舞台动画图
                { id: 1, img: require('@/assets/images/stage1.png') },
                { id: 2, img: require('@/assets/images/stage2.png') },
                { id: 3, img: require('@/assets/images/stage3.png') },
                { id: 4, img: require('@/assets/images/stage4.png') },
            ],
            currentStage: 1,//当前舞台
            stageId: "",//舞台id
            stateSpeed: 1000,//舞台切换速度
            title: require('@/assets/images/title.png'),//标题
            boxOriginal: require('@/assets/images/boxOriginal.png'),//初始盒子
            boxOpen: require('@/assets/images/boxOpen.png'),//结果盒子
            boxLid: require('@/assets/images/boxLidFont.png'),//盒子盖子
            boxLidRes: require('@/assets/images/boxLid.png'),//盒子盖子
            unClick: require('@/assets/images/unClick.png'), //开始匹配
            onClick: require('@/assets/images/onClick.png'),//匹配中
            isMatch: false,//是否开启匹配
            isPress: false,//是否按按钮
            hasLid: true,//盒子盖子动画是否结束
            hadMatch: false,//是否得到匹配
            isOpen: false,//是否打开盒子
            isEnd: false,//动画是否结束
            ribbon1: require('@/assets/images/ribbon1.png'),//彩带1
            ribbon2: require('@/assets/images/ribbon2.png'),//彩带2
            ribbon3: require('@/assets/images/ribbon3.png'),//彩带3
            ribbon4: require('@/assets/images/ribbon4.png'),//彩带4
            ribbon5: require('@/assets/images/ribbon5.png'),//彩带5
            ribbon6: require('@/assets/images/ribbon6.png'),//彩带6
            resLight: require('@/assets/images/resLight.png'),//结束光带
            start1: require('@/assets/images/start1.png'),//最大星
            start2: require('@/assets/images/start2.png'),//小星
            start3: require('@/assets/images/start3.png'),//中星
            start4: require('@/assets/images/start4.png'),//大星
            bubble: require('@/assets/images/bubble.png'),//气泡
            matchImg: "",//匹配结果图
        }
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {
    },
    // 监控data中的数据变化
    watch: {
        isMatch(newVal, oldVal) {
            if (newVal) {
                clearInterval(this.stageId)
                this.stateSpeed = 500;
                this.changeStage()
            } else {
                clearInterval(this.stageId)
                this.stateSpeed = 1000
                this.changeStage()
            }
        }
    },
    // 方法集合
    methods: {
        //配置android
        setAndroid() {
            this.appConfig.show_match_dialog = 0;
            this.appConfig.platform = 2;
        },
        //配置ios
        setIos(config) {
            this.appConfig.show_match_dialog = config.show_match_dialog;
            this.appConfig.show_match_title = config.show_match_title;
            this.appConfig.show_match_description = config.show_match_description;
            this.appConfig.platform = 1;
        },
        //初始化动画，并请求app端开始动画
        initAnimation() {
            this.isShow = false;
            this.isMatch = false;
            this.isPress = true;
            this.hasLid = true;
            this.hadMatch = false;
            this.isOpen = false;
            this.isEnd = false;
            if (this.appConfig.platform == 2) {
                $android.startMatch()
            } else {
                this.$bridge.callHandler("startMatch", '动画开始了', (res) => {
                });
            }
            // this.getRes()
        },
        //关闭猜你喜欢弹窗
        closeGuess() {
            this.isShow = false
        },
        //获得结果
        getRes(imgUrl) {
            if (imgUrl == 'defaltAvatar') {
                this.matchImg = require("@/assets/images/avatar.png")
            } else {
                this.matchImg = imgUrl
            }
            if (this.appConfig.show_match_dialog == 1) {
                this.isShow = true;
            } else {
                this.beginToMatch();
            }
        },
        //切换舞台
        changeStage() {
            let that = this
            this.stageId = setInterval(() => {
                if (this.currentStage < 4) {
                    this.currentStage++;
                } else {
                    this.currentStage = 1;
                }
            }, that.stateSpeed);
        },
        //开始匹配
        beginToMatch() {
            this.isShow = false;
            let time = parseInt(Math.random() * (10 - 2 + 1) + 2) * 1000;
            setTimeout(() => {
                this.isMatch = true;
                setTimeout(() => {
                    this.hadMatch = true;
                }, time)
            }, 200);
        },
        //结束匹配
        endMatch() {
            setTimeout(() => {
                this.isEnd = true;
                this.isPress = false;
                this.isMatch = false;
            }, 1500)
            if (this.appConfig.platform == 2) {
                $android.endToMatch()
            } else {
                this.$bridge.callHandler("endToMatch", '动画结束了', (res) => {
                });
            }
        },
        initIosFun() {
            this.$bridge.registerHandler('setIos', (data, responseCallback) => {
                this.setIos(data)
            })
            this.$bridge.registerHandler('getRes', (data, responseCallback) => {
                this.getRes(data)
            });
        },
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.changeStage();
    },
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        window.setAndroid = this.setAndroid;
        window.getRes = this.getRes;
        this.initIosFun();
    },
    beforeCreate() { }, // 生命周期 - 创建之前
    beforeMount() { }, // 生命周期 - 挂载之前
    beforeUpdate() { }, // 生命周期 - 更新之前
    updated() { }, // 生命周期 - 更新之后
    beforeDestroy() {
        clearInterval(this.stageId)
    }, // 生命周期 - 销毁之前
    destroyed() { }, // 生命周期 - 销毁完成
    activated() { }, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='less' scoped>
.index {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;

    img {
        -webkit-touch-callout: none;
        pointer-events: none; // 像微信浏览器还是无法禁止，加上这行样式即可
    }

    .content {
        display: flex;
        justify-content: center;
        background: url('~@/assets/images/bg.jpg');
        width: 1080px;
        // height: var(--screen-height);
        height: 100%;
        background-size: 100% 100%;
        position: relative;

        .stages {
            position: absolute;
            bottom: 0;

            .stagesBox {
                position: relative;
                width: 100%;
                height: 100%;

                .stageItem {
                    img {
                        width: 100%;
                    }
                }

                .startBtn {
                    width: 550px;
                    height: 192px;
                    position: absolute;
                    bottom: 381px;
                    pointer-events: unset
                }
            }
        }

        .lights {
            position: absolute;
            bottom: 544px;
            height: 823px;
            width: calc(100% - 104px);

            .lightBox {
                position: relative;
                width: 100%;
                height: 100%;

                .light1 {
                    width: 40px;
                    height: 446px;
                    background: url("~@/assets/images/light1.png");
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0;
                    left: 117px;

                }

                .lightMatch1 {
                    animation-duration: 3s;
                    -webkit-animation-direction: 3s;
                }

                .lightMatch2 {
                    animation-duration: 2s;
                    -webkit-animation-direction: 2s;
                }

                .light2 {
                    width: 18px;
                    height: 229px;
                    background: url("~@/assets/images/light2.png");
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0px;
                    left: 329px;
                }


                .light3 {
                    width: 13px;
                    height: 142px;
                    background: url("~@/assets/images/light3.png");
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0px;
                    right: 210px;
                }

                .light4 {
                    width: 39px;
                    height: 283px;
                    background: url("~@/assets/images/light4.png");
                    background-size: 100% 100%;
                    position: absolute;
                    bottom: 0;
                    right: 116px;
                }
            }

        }

        .infomations {
            position: absolute;
            top: 267px;

            .infomationsBox {
                position: relative;
                width: 100%;
                height: 100%;

                img {
                    width: 881px;
                }

                p {
                    user-select: none;
                    font-family: PingFang-SC-Regular;
                    font-size: 36px;
                    color: #c0ccff;
                    line-height: 51px;
                }
            }
        }

        .boxes {
            width: calc(100% - 104px);
            height: 823px;
            position: absolute;
            bottom: 544px;

            .boxesBox {
                position: relative;
                width: 100%;
                height: 100%;

                .original {
                    width: 450px;
                    position: absolute;
                    bottom: 45px;
                }

                .resultBox {
                    display: flex;
                    justify-content: center;

                    .open {
                        width: 450px;
                        position: absolute;
                        bottom: 45px;
                        z-index: 99;
                    }

                    .lid {
                        width: 653px;
                        position: absolute;
                        bottom: 175px;
                        perspective: 1000px;
                        z-index: 99;
                    }
                }

                .ribbons {
                    .ribbon1 {
                        position: absolute;
                        bottom: 0px;
                        width: 34px;
                    }

                    .ribbon2 {
                        position: absolute;
                        bottom: 0px;
                        width: 80px;
                    }

                    .ribbon3 {
                        position: absolute;
                        bottom: 0px;
                        width: 44px;
                    }

                    .ribbon4 {
                        position: absolute;
                        bottom: 0px;
                        width: 49px;
                    }

                    .ribbon5 {
                        position: absolute;
                        bottom: 0px;
                        width: 108px;
                    }

                    .ribbon6 {
                        position: absolute;
                        bottom: 0px;
                        width: 27px;
                    }
                }

                .resultLight {
                    position: absolute;
                    bottom: 233px;
                    left: 135px;
                    z-index: 99;

                    .resLight {
                        width: 666px;
                    }
                }

                .starts {
                    .biggest {
                        width: 64px;
                        z-index: 101;
                        opacity: 0;
                    }

                    .small {
                        width: 18px;
                        z-index: 101;
                        opacity: 0;
                    }

                    .middle {
                        width: 33px;
                        z-index: 101;
                        opacity: 0;
                    }

                    .big {
                        width: 43px;
                        z-index: 101;
                        opacity: 0;
                    }

                    .start1 {
                        position: absolute;
                        left: 257px;
                        bottom: 317px;
                    }

                    .start2 {
                        position: absolute;
                        left: 333px;
                        bottom: 403px;
                        animation-delay: 0.5s;
                    }

                    .start3 {
                        position: absolute;
                        left: 348px;
                        bottom: 333px;
                        animation-delay: 1s;
                    }

                    .start4 {
                        position: absolute;
                        left: 440px;
                        bottom: 386px;
                        animation-delay: 1.5s;
                    }

                    .start5 {
                        position: absolute;
                        right: 392px;
                        bottom: 385px;
                        animation-delay: 2s;
                    }

                    .start6 {
                        position: absolute;
                        right: 401px;
                        bottom: 261px;
                        animation-delay: 2.5s;
                    }

                    .start7 {
                        position: absolute;
                        left: 420px;
                        bottom: 287px;
                        animation-delay: 3s;
                    }

                    .start8 {
                        position: absolute;
                        left: 432px;
                        bottom: 338px;
                        animation-delay: 2.5s;
                    }

                    .start9 {
                        position: absolute;
                        right: 323px;
                        bottom: 411px;
                        animation-delay: 2s;
                    }

                    .start10 {
                        position: absolute;
                        left: 348px;
                        bottom: 328px;
                        animation-delay: 1.5s;
                    }

                    .start11 {
                        position: absolute;
                        right: 237px;
                        bottom: 387px;
                        animation-delay: 1s;
                    }

                    .start12 {
                        position: absolute;
                        right: 317px;
                        bottom: 338px;
                        animation-delay: 0.5s;
                    }
                }

                .friend {
                    position: absolute;
                    bottom: 60px;

                    .bubble {
                        background: url("~@/assets/images/bubble.png");
                        background-size: 100% 100%;
                        width: 312px;
                        height: 312px;

                        .fail {
                            width: 172px;
                            height: 171px;
                            background-color: rgba(46, 75, 171, 0.58);
                            border-radius: 24px;
                            border: solid 3px #d1dbff;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;

                            p {
                                font-family: PingFang-SC-Regular;
                                font-size: 33px;
                                line-height: 51px;
                                color: #eceffb;
                            }
                        }

                        .success {
                            img {
                                border-radius: 24px;
                                border: solid 3px #d1dbff;
                                width: 172px;
                                height: 171px;
                            }
                        }
                    }
                }
            }
        }
    }

}
</style>